<template>
  <a-layout>
    <a-layout-header style=" padding: 0 1rem" class="header">
      <div class="logo"> ColorTools </div>
      <a-button type="text" style="margin-left: 1rem;" @click="showHelp=true">
        <Icon><QuestionCircle16Regular/></Icon>如何使用
      </a-button>
      <div style="flex-grow: 1;"></div>
      <a-switch v-model="isDark" @change="updateDark" 
        checked-color="#1a3355" unchecked-color="#ece1c3">
        <template #checked>
          <Icon size="20" style="padding: 2px 0"><WeatherMoon16Regular/></Icon>
        </template>
        <template #unchecked>
          <Icon size="20" style="padding: 2px 0" class="sun-icon"><WeatherSunny16Regular/></Icon>
        </template>
      </a-switch>
    </a-layout-header>



    <a-layout-content style="padding: 1rem;">
      <div style="width: 100%; display:flex; justify-content:center">
        <a-card title="色板" style="width: 100%; max-width:1380px" :bordered="false">
          <div style="font-size: 0.85rem; margin-bottom:0.5rem; opacity: 0.5">
            色板和下面的颜色块都可以拖动，色板的颜色将会保存在本地缓存。
          </div>
          <div class="colorBoardBox">
            <template  v-for="(color, index) in myColorBoard" :key="index" >
              <!-- <a-color-picker  v-model="myColorBoard[index]" showPreset/> -->
              <colorBlock v-model="myColorBoard[index]" @delete="colorBoardDel(index)" /> 
            </template>
            <div class="colorBoardAdd" @click="colorBoardAdd" @dragover="dragOver" @drop="colorBlockAddDrop">
              <Icon size="20" ><Add12Filled/></Icon>
            </div>
            <div class="colorBoardAdd" @click="pickColor" >
              <Icon size="20" ><ColorPicker/></Icon>
              <span>取色</span>
            </div>
          </div>
        </a-card>
      </div>

    <div style="margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 1.5rem;align-items:baseline; justify-content:center">
        <colorMap />
        <div>
          <colorSets @add="addColor" />
          <footer style="opacity: 0.6;margin-top:1rem;" class="font-color">
            错误反馈及建议： 752735319@qq.com<br/>
            Designed by Lilidream. 8-9 Nov 2024.
          </footer>
        </div>
    </div>

    </a-layout-content>
  </a-layout>

  <a-modal v-model:visible="showHelp" title="如何使用" @cancel="showHelp=false">
    <div>
      这是一个用于调色和调整 Colormap 的网页工具。<br/>
      色板可以用于记录你的颜色（颜色将保存在本地，不清除浏览器缓存不会丢失）。<br/>
      Colormap 可以用于创建和调整 Colormap。<br/>
      调色板可以用于调整颜色。<br/>
      大部分的颜色块都是可以拖动的，拖到其他地方就可以设置颜色。<br/>

      <br/>
      可以使用预制的 Colormap，也可以通过截图来识别 Colormap。<br/>

      <video src="./assets/0001-0185.mp4" controls style="width: 100%;" autoplay></video>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Icon } from '@vicons/utils'
import {WeatherMoon16Regular, WeatherSunny16Regular,Add12Filled, QuestionCircle16Regular} from '@vicons/fluent';
import colorBlock from './components/colorBlock.vue';
import { record, read } from './api';
import colorMap from './components/colorMap.vue';
import colorSets from './components/colorSets.vue';
import { Notification } from '@arco-design/web-vue';
import {ColorPicker} from '@vicons/tabler'
// =======主题切换=======
const isDark = ref(false);
const newColor = "#6CA5DE";

const updateDark = () => {
  document.body.setAttribute('arco-theme', isDark.value ? 'dark' : 'light');
};

const myColorBoard = ref<String[]>([
  newColor
]);


// =======调色板操作=======

// 读取记录
const readColorBoard = () => {
  const colorBoard = read("colorBoard");
  if (colorBoard) {
    myColorBoard.value = colorBoard;
  }
};
readColorBoard();

// 添加颜色
const colorBoardAdd = () => {
  myColorBoard.value.push(newColor);
};

// 拖动添加颜色
const colorBlockAddDrop = (e: DragEvent) => {
  e.preventDefault();
  const color = e.dataTransfer?.getData('color');
  if (color) {
    myColorBoard.value.push(color);
  }
};

// 删除颜色
const colorBoardDel = (index: number) => {
  myColorBoard.value.splice(index, 1);
};

// 拖动事件
const dragOver = (e: DragEvent) => {
  e.preventDefault();
};

// 监听颜色变化并记录
watch(myColorBoard, (newValue) => {
  record("colorBoard", newValue);
}, { deep: true });


// =======调色板操作=======
const addColor = (color: string) => {
  myColorBoard.value.push(color);
};


// =======取色器=======
const pickColor = () => {
  if (!window.EyeDropper) {
    Notification.error("你的浏览器不支持系统取色器");
    return;
  }
  const eyeDropper = new EyeDropper();
  eyeDropper.open().then((color) => {
    myColorBoard.value.push(color.sRGBHex);
  });
};

// =======帮助=======
const showHelp = ref(false);


</script>

<style scoped>

.colorBoardBox{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.colorBoardAdd{
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background-color: #00000007;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border: 1px solid var(--color-border-2);
}
.colorBoardAdd:hover{
  background-color: #00000010;
}
.colorBoardAdd:active{
  background-color: #00000028;
}

</style>
